<template>
  <v-list>
    <template v-for="(m,i) in menus">
      <v-list-item :key="i" v-if="!m.children" link :to="m.path" color="primary">
        <v-list-item-icon>
          <v-icon v-text="m.icon"></v-icon>
        </v-list-item-icon>
        <v-list-item-title class="ml-n5" v-text="m.name"></v-list-item-title>
      </v-list-item>
      <v-list-group :key="i" v-else :prepend-icon="m.icon" no-action @click.stop="$emit('opened')" :value="id===m.id">
        <template v-slot:activator>
          <v-list-item-title class="ml-n5" v-text="m.name"></v-list-item-title>
        </template>
        <v-list-item v-for="(child, j) in m.children" :key="j" class="ml-n7" link :to="child.path">
          <v-list-item-icon>
            <v-icon :class="{'white--text':(child.path===chosen)}">mdi-circle-small</v-icon>
          </v-list-item-icon>
          <v-list-item-title class="ml-n7" :class="{'white--text':(child.path===chosen)}" v-text="child.name"></v-list-item-title>
        </v-list-item>
      </v-list-group>
    </template>
  </v-list>
</template>
<script>
  export default {
    props: {
      menus: Array,
      chosen: String,
    },
    data() {
      return {
        id: 0 // 父节点
      }
    },
    onNavigatorOpen(node) {
      this.id = node.id
    }
  }
</script>